<template>
  <div class="content">
    <div style="background: linear-gradient(270deg, #1DEFD5 0%, #00ABD6 100%)">
      <div class="title">
        <div>安全运行天数</div>
        <div>
          <svg-icon style="font-size: 3.5vh" icon-class="today0" />
        </div>
      </div>
      <div class="number">33</div>
    </div>
    <div style="background: linear-gradient(90deg, #11C9B6 0%, #089586 100%)">
      <div class="title">
        <div>安全运行天数</div>
        <div>
          <svg-icon style="font-size: 3.5vh" icon-class="today1" />
        </div>
      </div>
      <div class="number">33</div>
    </div>
    <div style="background: linear-gradient(87deg, #01ADA8 0%, #54F6AA 100%)">
      <div class="title">
        <div>安全运行天数</div>
        <div>
          <svg-icon style="font-size: 3.5vh" icon-class="today1" />
        </div>
      </div>
      <div class="number">33</div>
    </div>
    <div style="background: linear-gradient(83deg, #01CB73 0%, #106A5F 100%);margin-right: 0">
      <div class="title">
        <div>安全运行天数</div>
        <div>
          <svg-icon style="font-size: 3.5vh" icon-class="today1" />
        </div>
      </div>
      <div class="number">33</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.content {
    display: flex;
    height: 19%;
    > div{
        flex: 1;
        border-radius: 20px;
        margin-right: 20px;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        color: #fff;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 2.1vh 1vw;

          :nth-child(1) {
            font-size: 2.2vh;
          }
        }

        .number {
          text-align: center;
          font-weight: bold;
          font-size: 4vh;
        }
    }
}
</style>
